<template>
    <div id="HomeIndex">
        <div class="m-width-content">
            <div class="toubu">
                <el-menu router :default-active="$router.path" class="el-menu-demo" background-color="rgba(0, 0, 0,0)"
                  active-text-color="#0661FB " mode="horizontal" @select="handleSelect">
                  <el-menu-item @click="toLink('http://case.sy-my.net/enoa/')">官网</el-menu-item>
                  <el-menu-item @click="toLink('http://case.sy-my.net/imitate/#/imitate')">小程序</el-menu-item>
                  <el-submenu index="2">
                    <template slot="title">pc端工作台</template>
                    <el-menu-item index="/govIndexData">IOC运营经理</el-menu-item>
                    <el-menu-item index="/govIndexData2">商业运营经理</el-menu-item>
                    <el-menu-item index="/govIndexData3">市场营销经理</el-menu-item>
                    <el-menu-item index="/govIndexData4">商业招商经理</el-menu-item>
                    <el-menu-item>商家运营者</el-menu-item>
                  </el-submenu>
                  <el-menu-item @click="toLink('http://case.sy-my.net/imitate/#/imitateworkspace')">移动端工作台</el-menu-item>
                </el-menu>
              </div>
            <router-view />
        </div>
    </div>
</template>

<script>
import config from "@/config.js";
import { } from "@/api.js";

export default {
    name: "HomeIndex",
    data() {
        return {

        };
    },
    components: {},
    created() {
    },
    mounted() {

    },
    // 监听,当路由发生变化的时候执行


    methods: {
        toLink(url){
          window.location.href = url
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
    }
};
</script>


<style lang="scss" scoped>
/deep/  .el-menu.el-menu--horizontal{
  border-bottom: none !important;
 
}
/deep/ .el-submenu__title{
  background: transparent !important;
}
/deep/  .el-menu--horizontal .el-submenu .el-submenu__title{
  color: #000 !important;
  font-weight: bold;
}
/deep/   .el-menu--horizontal .el-menu-item{
  color: #000 !important;
  font-weight: bold;
}
.m-width-content{
    width: 1712px;
}
.toubu{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
#HomeIndex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
    background: url("~@/assets/images/bj.jpg") repeat-y;
    background-size: cover;
  }
.el-submenu__title i{
    color: #000 !important;
  }
  .el-submenu__title {
    border: none !important;
    background-color: rgba(0, 0, 0, 0) !important;
  }
  
  .el-menu {
    background-color: rgba(0, 0, 0, 0) !important;
    &.el-menu--popup{
      background: #FFF !important;
    }
  }
  
  .el-menu--horizontal .el-menu-item,
  .el-submenu__title {
    color: #000;
  }
  
  .el-menu-demo {
    li:hover {
      background: rgba(0, 0, 0, 0) !important;
    }
  }
  
  .el-menu--popup {
    min-width: 150px;
  }
  
  .el-menu--horizontal .el-menu .el-menu-item,
  .el-menu--horizontal .el-menu .el-submenu__title {
    color: #000 !important;
  }
  
  .el-menu--horizontal>.el-menu-item.is-active,
  .el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
    border: none !important;
  }
  
  .el-submenu__title {
    color: #000 !important;
  }
  
  .el-menu-demo,
  .el-menu--horizontal {
    background: rgba(0, 0, 0, 0) !important;
  }
  
  .el-menu {
    background: rgba(0, 0, 0, 0) !important;
  }
</style>
